<template>
	<view>
		<u-navbar placeholder autoBack>
			<template #right>
				<!-- #ifdef MP-WEIXIN -->
				<view class="more-icon">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view>
				<!-- #endif -->
					<u-icon name="more-dot-fill"></u-icon>
				</view>
			</template>
		</u-navbar>
		<scroll-view
			class="detail-page"
			:style="{
				paddingBottom: `${ $u.sys().statusBarHeight + (safeArea.top || 0) + (safeArea.bottom || 0) }px`
			}"
			scroll-y
		>
			<base-info :info="detailInfo.baseInfo"></base-info>
			<material :info="detailInfo.material"></material>
			<nutrition :info="detailInfo.nutrition"></nutrition>
			<steps :info="detailInfo.steps"></steps>
		</scroll-view>
	</view>
</template>

<script>
	import baseInfo from "./components/baseInfo.vue";
	import material from "./components/material.vue";
	import nutrition from "./components/nutrition.vue";
	import steps from "./components/steps.vue";
	export default {
		name: 'detailPage',
		components: {
			baseInfo,
			material,
			nutrition,
			steps
		},
		data() {
			return {
				// 是否获取了详细信息
				detailFlag: false,
				// 详细信息
				detailInfo: {
					// 基础信息
					baseInfo: {
						title: '',
						time: '',
						difficulty: 0,
						like: 0,
						tags: [],
						note: null
					},
					// 用料
					material: {
						canSetNum: false,
						personNum: 0,
						dosageTotal: '',
						foodList: []
					},
					// 营养成分
					nutrition: {
						calorie: '',
						protein: '',
						carbohydrate: '',
						fat: '',
						remake: ''
					},
					// 步骤
					steps: []
				},
				safeArea: {}
			}
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			foodId: {
				type: [Number,String],
				default: ''
			}
		},
		methods: {
			// 获取详情
			getDetail() {
				// 模拟数据
				console.log('模拟请求数据');
				this.detailInfo = {
					// 基础信息
					baseInfo: {
						title: '一口一个嘎嘎香',
						time: '约25-30分钟',
						difficulty: 2,
						like: 1550,
						tags: [
							{ id: 0, text: '新秀榜TOP50' },
							{ id: 1, text: '飙升榜TOP50' }
						],
						note: {
							list: [
								{ id: 0, img: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG' },
								{ id: 1, img: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG' },
								{ id: 2, img: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG' },
								{ id: 3, img: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG' }
							],
							total: 20,
							firstNote: {
								id: 0,
								username: '过逝如风',
								avatar: 'https://up.enterdesk.com/photo/2009-11-25/enterdesk.com-180ED980632548D3F7A59FA1F0DF7BBE.JPG',
								content: '做的时候很难忍住不偷吃~(回完锅变软了一点，没有才煎好之后脆。。。)',
								like: 8
							}
						},
					},
					// 用料
					material: {
						canSetNum: false,
						personNum: 0,
						dosageTotal: '2盒',
						foodList: [
							{ hasChildren: true, title: '果酱', children: [
								{ title: '车厘子', dosage: 250, unit: 'g' },
								{ title: '黄冰糖', dosage: 50, unit: 'g' }
							] },
							{ hasChildren: true, title: '提拉米苏', children: [
								{ title: '鸡蛋黄', dosage: 6, unit: '个' },
								{ title: '砂糖', dosage: 80, unit: 'g' },
								{ title: '马斯卡彭奶酪', dosage: 500, unit: 'g' },
								{ title: '淡奶油', dosage: 1000, unit: 'ml' }
							] },
							{ hasChildren: true, title: '其他', children: [
								{ title: '手指饼干', dosage: 150, unit: 'g' },
								{ title: '牛奶', dosage: 200, unit: 'g' },
								{ title: '车厘子', dosage: 250, unit: 'g' }
							] }
						],
					},
					// 营养成分
					nutrition: {
						calorie: '200Kcal',
						protein: '100g',
						carbohydrate: '50g',
						fat: '50g',
						remake: '1碗所含营养'
					},
					// 步骤
					steps: [
						{ video: 'https://i4.chuimg.com/9c512752864611e88a5a02420a000131_720w_1280h.mp4', text: '制作果酱：车厘子洗净，用吸管去核，对半切开，倒入锅中再倒入黄冰糖，拌匀腌制一会，中火煮至粘稠备用' },
						{ video: 'https://i4.chuimg.com/9c512752864611e88a5a02420a000131_720w_1280h.mp4', text: '制作慕斯糊：蛋黄和砂糖隔热水打发至膨胀变色，倒入软化的马斯卡彭搅拌均匀，淡奶油打发至出现纹路，和蛋黄部分翻拌均匀' },
						{ video: 'https://i4.chuimg.com/9c512752864611e88a5a02420a000131_720w_1280h.mp4', text: '手指饼干蘸草莓牛奶放入盒中，倒入一半蛋糕糊，再放一层手指饼干，再倒入剩下的慕斯糊刮平放入冰箱冷藏两小时' },
						{ video: 'https://i4.chuimg.com/9c512752864611e88a5a02420a000131_720w_1280h.mp4', text: '取出抹上车厘子果酱，放上车厘子即可' },
					]
				}
				this.detailFlag = true
			}
		},
		watch: {
			isShow(val) {
				// 如果已经有详情数据则不必获取数据
				if(this.detailFlag) return
				this.getDetail()
			}
		},
		created() {
			this.safeArea = uni.$u.sys().safeAreaInsets
		}
	}
</script>

<style lang="scss" scoped>
	.more-icon {
		margin-right: 200rpx;
	}
	.detail-page {
		height: 100vh;
		box-sizing: border-box;
		padding: 0 40rpx;
		overflow: auto;
	}
</style>